<?php
use think\Config;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo Config::get('appname');?></title>
<link href="/static/css/default.css" rel="stylesheet" type="text/css">
<link href="/static/css/style/green.css" rel="stylesheet" type="text/css" id = 'link'>
<link rel="stylesheet" href="/static/FileUpload/css/jquery.fileupload.css" />

<style>
html{overflow:hidden;}
.table tr td{
    text-align:center;
}
</style>
</head>

<body >
      
       
    <form>
        <table class="formtable">
        
        <tbody>
        
            <tr>
            <td class="tlabel">选择文件</td>
           
            <td>

                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>上传文件</span>
                    
                  <input id="fileupload" type="file" name="imgFile" multiple>
                    
                </span>

            </td>
            </tr>
            <tr>
                    <td class="tlabel">模板下载</td>
                   
                    <td>
        
                        <a href="/static/temp/student.csv">点击下载</a>
                    </td>
                    </tr>
            <tr>
            <tr>
                    <td colspan="2">
                        <div>
                                <table class="table" id="app">
                                        <tr>
                                            <td>学号</td>
                                            <td>姓名</td>
                                            <td>性别</td>
                                            <td>班级</td>
                                            <td>第一联系人</td>
                                            <td>第一联系人电话</td>
                                            <td>第二联系人</td>
                                            <td>第二联系人电话</td>
                                            <td>紧急联系方式</td>
                                        </tr>
                                        <tr v-for="item in list">
                                            <td>{{item.number}}</td>
                                            <td>{{item.truename}}</td>
                                            <td>{{item.sex}}</td>
                                            <td>{{item.classname}}</td>
                                            <td>{{item.fathername}}</td>
                                            <td>{{item.fatherphone}}</td>
                                            <td>{{item.mothername}}</td>
                                            <td>{{item.motherphone}}</td>
                                            <td>{{item.otherphone}}</td>
                                        </tr>
                                    </table>
                        </div>
                           
                        </td>
            </tr>
            

            
        </tbody>
        
        </table>
        
        <div class="formbtn">
        <input type="button" value="提交"  class="btnsave">
        <input type="button" value="重置"  class="btncancel">
        </div>
        
    </form>

</body>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/skin.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script src="/static/FileUpload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/FileUpload/js/jquery.iframe-transport.js"></script>
<script src="/static/FileUpload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/static/js/vue2.js"></script>
<script>
     var vm = new Vue({
        el: '#app',
        data: {
            list: []
        },
        methods: {
           

        },
        created: function () {  //初始化事件里边去调用查询方法
    
        }
    });


		$('#fileupload').fileupload({
                    autoUpload: true,//是否自动上传
                    url: "/index/Home/upload",
                    dataType: 'json',
                    done: function (e, data) {
                       
						console.log(data.result);
                        if (data.result=="") {
                            layer.msg("上传出错了!");
                        } else {
							
                          console.log(data.result);

                          var filename = data.result;
                          loadcsv(filename);


                        }
                    },
                    progressall: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('#progress .progress-bar').css(
                            'width',
                            progress + '%'
                        );
                    }
                }).prop('disabled', !$.support.fileInput);

function loadcsv(filename){
    $.post("/Index/Home/loadstudentcsv",{filename:filename},function(data){
        console.log(data.data);
        vm.$data.list = data.data;
    });

}
$(function(){


    //loadcsv("20181231/e3ab733a6f238cce227053ff2ae78780.csv");
    $(".btnsave").click(function(){
      
        var list = vm.$data.list;
        var data = JSON.stringify(list);
        $.post("/Index/Student/importdata",{data:data},function(data){
            if(data.status==200){
                layer.msg("导入成功");
            }
        });

    });

});
</script>
</html>
